import { VideoService } from '@/lib/video/video-service';
import Videos from '@/app/components/video-list/videos';
import { Suspense } from 'react';
import VideosSkeleton from '@/app/components/video-list/videos-skeleton';
import { NEWEST_METADATA } from '@/lib/utils/metadata';
import type { Metadata } from 'next';

interface NewestPageProps {
  searchParams: Promise<{
    page?: string;
  }>;
}

// 使用统一的元数据
export const metadata: Metadata = NEWEST_METADATA;

export default async function NewestPage(props: NewestPageProps) {
  // 解构并获取参数
  const searchParams = await props.searchParams;
  
  // 获取当前页码
  const currentPage = searchParams.page ? parseInt(searchParams.page) : 1;
  
  // 每页显示的数量
  const pageSize = 24;
  
  try {
    // 获取最近24小时内的视频，使用分页方式
    const { videos, total } = await VideoService.getLast24HoursVideos(currentPage, pageSize);
    
    return (
      <div className="container mx-auto px-3 sm:px-6 md:px-8 lg:px-12 xl:px-20 2xl:px-24 py-3 pb-4 sm:pb-4 max-w-full overflow-x-hidden">
        <div className="mb-8">
          <h1 className="text-2xl md:text-3xl font-bold">最新上线</h1>
          <p className="text-gray-400 mt-2">
            展示最近更新的影视资源，高清无广告
          </p>
        </div>
        
        <Suspense fallback={<VideosSkeleton />}>
          <Videos 
            videos={videos} 
            page={currentPage} 
            total={total} 
          />
        </Suspense>
      </div>
    );
  } catch (error) {
    console.error('加载最新视频失败:', error);
    return (
      <div className="text-center py-16">
        <h2 className="text-xl font-bold text-red-500">加载失败</h2>
        <p className="text-gray-400 mt-2">请稍后再试</p>
      </div>
    );
  }
} 